<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view
    class="p-3"
    style="background-color: #ffffff; position: relative; z-index: -2"
    v-if="member.cardId > 0"
  >
    <view class="position-relative mt-1">
      <view class="card-box flex flex-column align-center justify-center">
        <view class="align-center">
          <image src="/static/images/mine/vip.png" class="vip-img"></image>
        </view>
        <view class="font-price">{{ card.name }}</view>
        <view class="font-time">{{
          card.period == 0
            ? currentLanguageTexts.permanentlyValid
            : card.period + currentLanguageTexts.monthValidityPeriod
        }}</view>
      </view>
      <view class="cart-box-bg"><image :src="card.styleImg"></image></view>
    </view>
  </view>
  <view class="p-3 bg-white">
    <view class="flex justify-center align-center">
      <uv-line length="20%" color="#2979ff"></uv-line>
      <text class="mx-1 font-weight-bolder">{{
        currentLanguageTexts.memberPrivileges
      }}</text>
      <uv-line length="20%" color="#2979ff"></uv-line>
    </view>
    <view class="py-5">
      <uv-grid :border="false" :col="3">
        <uv-grid-item v-if="card.discount > 0">
          <image
            src="/static/images/mine/zk.png"
            style="width: 60rpx; height: 60rpx"
          ></image
          >{{ currentLanguageTexts.menuOrderedYd(getCartNumber(cart.content)) }}
          <text class="font-size-sm text-color-assist my-2">{{
            currentLanguageTexts.openingCard(card.discount)
          }}</text>
        </uv-grid-item>
        <uv-grid-item v-if="card.integral > 0">
          <image
            src="/static/images/mine/jf.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <text class="font-size-sm text-color-assist my-2">{{
            currentLanguageTexts.Openpoint(card.integral)
          }}</text>
        </uv-grid-item>
        <uv-grid-item v-if="card.mony > 0">
          <image
            src="/static/images/mine/yue.png"
            style="width: 60rpx; height: 60rpx"
          ></image>
          <text class="font-size-sm text-color-assist my-2">{{
            currentLanguageTexts.Openyuan(card.mony)
          }}</text>
        </uv-grid-item>
      </uv-grid>
    </view>
    <view class="flex justify-center align-center">
      <uv-line length="20%" color="#2979ff"></uv-line>
      <text class="mx-1 font-weight-bolder">{{
        currentLanguageTexts.instructionsForUse
      }}</text>
      <uv-line length="20%" color="#2979ff"></uv-line>
    </view>
    <view class="mt-5 font-size-sm">
      <rich-text :nodes="card.rule"></rich-text>
    </view>
    <view
      class="font-size-base text-color-base font-weight-bold"
      style="margin-bottom: 20rpx; margin-top: 80rpx"
      v-if="member.cardId == '' || member.cardId == 0"
      >{{ currentLanguageTexts.payWay }}</view
    >
    <list-cell last v-if="member.cardId == '' || member.cardId == 0">
      <view
        class="d-flex align-items-center justify-content-between w-100"
        @click="setPayType('weixin')"
      >
        <view
          class="iconfont iconwxpay line-height-100 payment-icon"
          style="color: #7eb73a"
        ></view>
        <view class="flex-fill">{{ currentLanguageTexts.wxPay }}</view>
        <view
          class="iconfont line-height-100 checkbox checked iconradio-button-on"
          v-if="payType == 'weixin'"
        >
        </view>
        <view
          class="iconfont line-height-100 checkbox iconradio-button-off"
          v-else
        ></view>
      </view>
    </list-cell>
  </view>

  <view
    class="fixed-bottom"
    style="background-color: #e45656; padding: 30rpx 0; text-align: center"
    @click="buy"
    v-if="member.cardId == '' || member.cardId == 0"
  >
    <text class="text-white">{{ currentLanguageTexts.buyNow }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { getCardDetail, cardBuy } from '@/api/user';
import { isWeixin } from '@/utils/util';
import { payUnify, getWechatConfig } from '@/api/order';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
// #ifdef H5
import * as jweixin from 'weixin-js-sdk';
// #endif

const main = useMainStore();
const { member, currentLanguageTexts } = storeToRefs(main);

const title = ref(
  currentLanguageTexts.value.membershipCard + currentLanguageTexts.value.details
);
const card = ref({});
const payType = ref('weixin');
const cardId = ref(0);

onLoad((option) => {
  cardId.value = option.id;
  getDetail(option.id);
});

const getDetail = async (id) => {
  let data = await getCardDetail({ id: id });
  if (data) {
    card.value = data;
  }
};

const buy = async () => {
  let resData = await cardBuy({
    cardId: cardId.value,
  });
  if (!resData) {
    return;
  }
  let order = { orderId: resData };

  if (payType.value == 'weixin') {
    // 微信支付
    weixinPay(order);
  } else if (payType.value == 'alipay') {
    // 余额支付
    aliPay(order);
  }
};
const weixinPay = async (order) => {
  let from = 'routine';
  // #ifdef H5
  from = 'h5';
  if (isWeixin()) {
    from = 'wechat';
  }

  // #endif
  //let that = this;
  let data = await payUnify({
    uni: order.orderId,
    from: from,
    paytype: 'weixin',
  });
  if (!data) {
    return;
  }
  if (data.trade_type == 'MWEB') {
    // #ifdef H5
    // 微信外的H5
    location.href = data.data;
    // #endif
  } else if (data.trade_type == 'JSAPI') {
    console.log('param:', data);

    // #ifdef MP-WEIXIN
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: data.data.timeStamp,
      nonceStr: data.data.nonceStr,
      package: data.data.package,
      signType: 'MD5',
      paySign: data.data.paySign,
      success: function (res) {
        uni.switchTab({
          url: '/pages/mine/mine',
        });
      },
      fail: function (err) {},
    });
    // #endif
  } else if (data.trade_type == 'W-JSAPI') {
    //公众号支付
    let config = await getWechatConfig();
    if (config) {
      jweixin.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名
        jsApiList: ['chooseWXPay'],
      });
      jweixin.ready(function () {
        jweixin.chooseWXPay({
          timestamp: data.data.timeStamp,
          nonceStr: data.data.nonceStr,
          package: data.data.package,
          signType: 'MD5',
          paySign: data.data.paySign,
          success: function (res) {
            uni.removeStorageSync('cart');
            uni.switchTab({
              url: '/pages/mine/mine',
            });
          },
          fail: function (err) {},
        });
      });
      jweixin.error(function (res) {});
    } else {
      // console.log(res)
    }
  }
};
</script>

<style lang="scss" scoped>
.card-box {
  color: #ffffff;
  height: 400rpx;
  padding: 30rpx;
  text-align: center;

  .font-price {
    margin-top: 10rpx;
    font-size: 50rpx;
  }
  .font-time {
    margin-top: 20rpx;
    font-size: 26rpx;
  }
  .font-more {
    margin-top: 80rpx;
    font-size: 24rpx;
  }
}
.vip-img {
  width: 40rpx;
  height: 40rpx;
}
.cart-box-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

  image {
    width: 690rpx;
    height: 400rpx;
  }
}
</style>
